<template>
    <v-snackbar
      v-model="show"
      :color="color"
      bottom
      right
      text
      timeout="4000"
    >

    <readMore :moreString="message" :lessString="message.substring(0,120)" contentClass="subtitle-2 text-break-all" linkClass="text-decoration-underline ml-3 pointer" wordsLimit="10" v-if="message.length > 120"></readMore>
      <p v-else v-html="message"></p>
      <template v-slot:action="{ attrs }">
        <v-btn
          color="red"
          text
          v-bind="attrs"
          width="50"
          min-width="50"
          @click="show = false"
        >
          <v-icon color="#fff">{{icons.mdiClose}}</v-icon>
        </v-btn>
      </template>
      
    </v-snackbar>
</template>

<script>
import { mdiClose } from '@mdi/js'

export default {
  data() {
    return {
      show: false,
      message: '',
      color: '',
      icons: { mdiClose },
    }
  },

  created() {
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'snackbar/showMessage') {
        this.message = state.snackbar.content
        this.color = state.snackbar.color
        this.show = true
      }
    })
  },
}
</script>
